<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="../build/react/umd/react.development.js"></script>
    <script src="../build/react-dom/umd/react-dom.development.js"></script>
    <script src="../build/babel/babel.min.js"></script>
    <script src="../build/jquery/jquery.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
    <script type="text/babel">
      class UserGist extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            username: "",
            lastGistUrl: ""
          };
        }

        componentDidMount() {
          $.get(
            this.props.source,
            function(result) {
              var lastGist = result[0];
              this.setState({
                username: lastGist.owner.login,
                lastGistUrl: lastGist.html_url
              });
            }.bind(this)
          );
        }

        render() {
          return (
            <div>
              {this.state.username}'s last gist is{" "}
              <a href={this.state.lastGistUrl}>here({this.state.lastGistUrl})</a>.
            </div>
          );
        }
      }

      ReactDOM.render(
        <UserGist source="https://api.github.com/users/dhclly/gists" />,
        document.getElementById("root")
      );
    </script>
  </body>
</html>
